<template>
	<view class="grid-nav-mod">
		<view class="mod-head">
			<u-section title="平台服务" font-size="32" :showLine="false" :right="false" :bold="false"></u-section>
		</view>
		<view class="mod-body">
			<u-grid :col="4" :border="false">
				<u-grid-item @click="jump('/pages/user/repair/my-repair')">
					<u-icon name="anzhuang" custom-prefix="xin-icon" :size="48"></u-icon>
					<view class="grid-text">安装服务</view>
				</u-grid-item>
				<u-grid-item @click="jump('/pages/user/repair/my-repair')">
					<u-icon name="baoxiu" custom-prefix="xin-icon" :size="48"></u-icon>
					<view class="grid-text">设备保修</view>
				</u-grid-item>
				<u-grid-item @click="jump('/pages/user/repair/my-repair')">
					<u-icon name="yali" custom-prefix="xin-icon" :size="48"></u-icon>
					<view class="grid-text">移机服务</view>
				</u-grid-item>
				<u-grid-item @click="jump('/pages/public/richtext?id=3')">
					<u-icon name="lvxin" custom-prefix="xin-icon" :size="48"></u-icon>
					<view class="grid-text">使用说明</view>
				</u-grid-item>
				<u-grid-item @click="jump('/pages/public/faq')">
					<u-icon name="shui" custom-prefix="xin-icon" :size="48"></u-icon>
					<view class="grid-text">注意事项</view>
				</u-grid-item>
				<u-grid-item @click="jump('/pages/user/wallet/recharge')">
					<u-icon name="chongzhi" custom-prefix="xin-icon" :size="48"></u-icon>
					<view class="grid-text">充值续费</view>
				</u-grid-item>
				<u-grid-item @click="jump('/pages/public/chat/index')">
					<u-icon name="kefu" custom-prefix="xin-icon" :size="48"></u-icon>
					<view class="grid-text">联系客服</view>
				</u-grid-item>
				<u-grid-item @click="jump('/pages/public/feedback')">
					<u-icon name="faq" custom-prefix="xin-icon" :size="48"></u-icon>
					<view class="grid-text">问题反馈</view>
				</u-grid-item>
				
			</u-grid>
		</view>
	</view>
</template>

<script>
export default {
	components: {},
	data() {
		return {
			 
		};
	},
	props: {
		 
	},
	 
	computed: {},
	created() {
		 
	},
	methods: {
		jump(path,param){
			this.$Router.push({
				path:path,
				query:param
			});
		},
	}
};
</script>

<style lang="scss" scoped>
	.grid-nav-mod{
		padding: 24upx;
		.mod-head{
			margin-bottom: 24upx;
		}
		.mod-body{
			
		}
		/deep/.u-grid{
			margin-left: -18upx;
			margin-top: -18upx;
			width: auto;
			.u-icon{
				vertical-align: middle;
			}
			.u-grid-item{
				text-align: left;
				background-color: transparent!important;
				padding-left: 18upx;
				padding-top: 18upx;
				line-height: 1.2;
				&.u-hover-class{
					opacity: 1;
					color: $coco-theme-color;
					.u-grid-item-box{
						background-color: #fafcff;
						box-shadow: 0 2upx 12upx 0 rgba(66, 140, 255, 0.1);
					}
					.grid-text{
						color: $coco-theme-color;
					}
				}
			}
			.u-grid-item-box{
				padding: 20upx 22upx!important;
				align-items: flex-start;
				background-color: #fff;
				text-align: left;
				justify-content: flex-start!important;
				border-radius: 10upx;
				box-shadow: -2upx 2upx 20upx 0 rgba(6, 0, 1, 0.06);
			}
			
		}
		
		.grid-text {
			font-size: 24upx;
			margin-top:16upx;
			color: $u-content-color;
		}
	}
	
</style>
